<template>
  <div class="profile-index">
    <van-nav-bar
        class="app-nav-bar"
        title="个人信息"
        left-arrow
        @click-left="$router.back()"
    />
    <input type="file" accept="image/*" @change="onFileChange" hidden ref="file">
    <van-cell title="头像" class="avater" is-link @click="$refs.file.click()">
      <van-image
          width="24"
          round height="24"
          fit="cover"
          :src="profile.photo">1111</van-image>
    </van-cell>
    <van-cell title="昵称" @click="isEditNameShow=true" is-link :value="profile.name"></van-cell>
    <van-cell title="性别" @click="isEditGenderShow=true"  is-link :value="profile.gender===1?'男':'女'"></van-cell>
    <van-cell title="生日"  @click="isEditBirthdayShow=true" is-link :value="profile.birthday"></van-cell>
    <!--    image--弹出层 -->
    <van-popup v-model="isEditImageShow" position="bottom" :style="{ height: '100%' ,background:'black'}">
      <profile-image :file="previewImage" @close="isEditImageShow=false" @update-photo="profile.photo=$event"/>
    </van-popup>
    <!--    name--弹出层-->
    <van-popup v-model="isEditNameShow" v-if="isEditNameShow" position="bottom" :style="{height: '100%'}">
      <profile-name :name="profile.name" @update-name="profile.name=$event" @close="isEditNameShow=false" />
    </van-popup>

    <!--    gender--弹出层 -->
    <van-popup v-model="isEditGenderShow" v-if="isEditGenderShow" position="bottom" >
      <profile-gender :gender="profile.gender" @update-gender="profile.gender=$event" @close="isEditGenderShow=false"/>
    </van-popup>

    <!--    birthday--弹出层 -->
    <van-popup v-model="isEditBirthdayShow" position="bottom">
      <profile-day :birthday="profile.birthday" @update-birthday="profile.birthday=$event" @close="isEditBirthdayShow=false"/>
    </van-popup>
  </div>
</template>

<script>
import {getProfile} from "@/api/user";
import profileName from "@/views/profile/components/profileName";
import ProfileGender from "@/views/profile/components/profileGender";
import profileDay from "@/views/profile/components/profileDay";
import profileImage from "@/views/profile/components/profileImage";
export default {
  name: "profileIndex",
  components:{
    ProfileGender,
    profileName,
    profileDay,
    profileImage
  },
  data(){
    return{
      profile:{},
      isEditNameShow:false,
      isEditImageShow:false,
      isEditGenderShow:false,
      isEditBirthdayShow:false,
      previewImage:null
    }
  },
  created() {
    this.loadProfile()
  },
  methods:{
    async loadProfile(){
      const {data}=await getProfile()
      this.profile=data.data
    },
    onFileChange(){
      const file=this.$refs.file.files[0]
      this.previewImage=file
      this.isEditImageShow=true
      this.$refs.file.value=''
    }
  }
}
</script>

<style scoped lang="less">
.app-nav-bar{
  background-color: #3a8ee6;
}
/deep/.van-icon-arrow-left{
  color: #ffffff;
}
/deep/.van-nav-bar__text{
  color: #ffffff;
}
/deep/.van-nav-bar__title{
  color: #ffffff;
}
.van-popup{
  background-color: #f7f8fa;
}
.avater{
  display: flex;
  align-items: center;
}
</style>